<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:jsf="http://xmlns.jcp.org/jsf"
      lang="#{p:language()}" xml:lang="#{p:language()}">

    <h:head>
        <f:facet name="first">
            <ui:fragment rendered="#{facesContext.application.projectStage eq 'Production'}">
            </ui:fragment>
            <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=0"/>
            <meta name="apple-mobile-web-app-capable" content="yes"/>
            <link href="#{resource['showcase/images/favicon-32x32.png']}" rel="icon" type="image/png" sizes="32x32"/>
            <link href="#{resource['showcase/images/favicon-16x16.png']}" rel="icon" type="image/png" sizes="16x16"/>
        </f:facet>
        <title>PrimeFaces Showcase</title>

        <h:outputStylesheet name="css/primeflex2.css" library="showcase"/><!-- classic PrimeFlex 2 for backward-compatibility -->
        <h:outputStylesheet name="css/primeflex3.css" library="showcase"/><!-- latest primeflex -->
        <h:outputStylesheet name="css/flags/flags.css" library="showcase"/>

        <h:outputScript name="jquery/jquery.js" library="primefaces"/>
        <h:outputScript name="jquery/jquery-plugins.js" library="primefaces"/>
        <h:outputScript name="locales/locale-#{app.locale.language}.js" library="primefaces"/>

        <ui:insert name="head"/>
        
    </h:head>

    <h:body>
        <f:view locale="#{app.locale.locale}">
        <div class="layout-wrapper #{app.inputStyleClass}">
           
            
            <ui:include src="./topbar.xhtml"></ui:include>
            <ui:include src="./menu.xhtml"></ui:include>
            <ui:include src="./config.xhtml"></ui:include>
            <!--<div class="layout-mask"></div>-->

            <div class="layout-content">
                <ui:insert name="content">
                    <div class="content-section implementation">
                        <h:form id="contentForm" prependId="false" enctype="multipart/form-data">
                            <p:growl id="messages" showDetail="true"  life="3000"/>
                            <p:confirmDialog global="true" showEffect="fade" hideEffect="fade" responsive="true" width="350">
                                <p:commandButton value="#{sms['common.no']}" type="button"
                                    styleClass="ui-confirmdialog-no ui-button-flat" />
                                <p:commandButton value="#{sms['common.yes']}" type="button" styleClass="ui-confirmdialog-yes" />
                            </p:confirmDialog>
                        <ui:insert name="implementation"></ui:insert>
                        </h:form>
                    </div>
                </ui:insert>
                <ui:include src="./footer.xhtml"></ui:include>
                <p:ajaxExceptionHandler type="javax.faces.application.ViewExpiredException" update="viewExpiredDialog" onexception="PF('viewExpiredDialog').show();" />
                <p:dialog id="viewExpiredDialog" header="Session expired" widgetVar="viewExpiredDialog" height="500px" onShow="document.location.href = document.location.href;">
                    <h3>Reloading page</h3>
                    Message: #{pfExceptionHandler.message} <br/>
                    StackTrace: <h:outputText value="#{pfExceptionHandler.formattedStackTrace}" escape="false" />
                </p:dialog>

            </div>
        </div>

        <ui:insert name="status">
            <p:ajaxStatus styleClass="status-indicator">
                <f:facet name="start">
                    <i class="pi pi-spin pi-spinner" aria-hidden="true"></i>
                </f:facet>

                <f:facet name="complete">
                    <h:outputText value=""/>
                </f:facet>
            </p:ajaxStatus>
        </ui:insert>

                
        <ui:insert name="body"></ui:insert>

        <h:outputStylesheet name="css/layout/layout.css"  library="showcase"/>
        <h:outputScript name="script/layout.js" library="showcase" />
        <h:outputScript name="script/prism.js" library="showcase"/>
        </f:view>
    </h:body>

</html>
